<template name="login">
	<view v-if="ishow">
		<view class="bgs"></view>
		<view class="login-v">
			<image src="../static/login-icon.png" mode="widthFix"></image>
			<view class="title">是否确认登陆</view>
			<view class="buttom">
				<view @click="hideLogin">取消</view>
				<button open-type="getUserInfo" plain="true" @getuserinfo="getuserinfo">登陆</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				ishow: false
			}
		},
		props: {

		},
		created() {

		},
		methods: {
			/*-------------------------------点击-------------------------------*/
			/**
			 * 显示登陆弹窗
			 */
			showLogin: function() {
				this.ishow = true;
			},
			/**
			 * 隐藏登陆弹窗
			 */
			hideLogin: function() {
				this.ishow = false;
			},
			/*-------------------------------函数-------------------------------*/
			/**
			 * 登录
			 */
			getuserinfo: function(e) {
				let than = this;
				//判断用户标识是否存在
				let loginOpendId = uni.getStorageSync('loginOpendId');
				if (loginOpendId) {
					//存在，根据标识获取用户信息
					var data = {
						openid: loginOpendId
					}
					than.getUserByOpenId(data);
				} else {
					//不存在,根据code走授权登陆流程
					uni.showLoading({
						title: '登陆中'
					})
					console.log('获取用户信息', e.detail)
					if (e.detail.errMsg == "getUserInfo:ok") {
						let info = e.detail.userInfo;
						let nickName = info.nickName; //姓名
						let avatarUrl = info.avatarUrl; //头像
						uni.login({
							success(res) {
								console.log('-----------------------code--------------', res.code)
								if (res.code) {
									//请求注册接口
									than.$api.myPost({
										url: 'getOpenid',
										data: {
											code: res.code
										},
										success(res) {
											if (res.status == 'success' && res.openid) {
												var data = {
													openid: res.openid,
													userName: nickName,
													userImage: avatarUrl
												}
												than.getUserByOpenId(data);
											} else {
												than.$api.msg(res.message);
												uni.hideLoading();
											}
										},
										fail() {
											uni.hideLoading();
										}
									})

								} else {
									uni.hideLoading();
								}
							},
							fail() {
								uni.hideLoading();
							}
						})
					} else {
						uni.hideLoading();
						uni.showToast({
							title: e.detail.errMsg == "getUserInfo:fail auth deny" ? '拒绝授权' : e.detail.errMsg,
							icon: 'none',
							duration: 2000
						})
						this.ishow = false;
					}
				}
				this.hideLogin();
			},


			/**
			 * 根据openid获取用户信息（新用户将创建用户）
			 * @param {Object} data{openid：openid，userName：‘微信昵称’，userImage：‘微信头像’，recommendShareCode：‘推荐人分享码’}
			 */
			getUserByOpenId: function(data) {
				let than = this;
				if (uni.getStorageSync('recommendShareCode')) {
					data.recommendShareCode = uni.getStorageSync('recommendShareCode');
				}
				than.$api.myPost({
					url: 'usergetUserInfo',
					data: data,
					success(res) {
						if (res.status == 'success' && res.userInfo) {
							uni.setStorageSync('loginOpendId', res.userInfo.openid);
							uni.setStorageSync('userInfo', res.userInfo);
							than.loginreturn(res.userInfo)
							if (data.issx) {
								than.$api.msg('资料已更新');
							}
							uni.hideLoading();
						} else {
							than.$api.msg(res.message);
							uni.hideLoading();
						}
					},
					fail() {
						uni.hideLoading();
					}
				})
			},

			/**
			 * 等录成功回调
			 * @param {Object} info
			 */
			loginreturn: function(info) {
				//登陆成功回调
				this.$emit('myuserinfo', info);
			},
		}
	}
</script>

<style lang="scss">
	.bgs {
		width: 100vw;
		height: 100vh;
		top: 0;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		z-index: 1111;
	}

	.login-v {
		position: fixed;
		top: 25%;
		background-color: #fff;
		z-index: 11111;
		width: 600rpx;
		left: calc((100% - 600rpx)/2);
		border-radius: 20rpx;
		box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);

		image {
			width: 150rpx;
			height: 150rpx;
			margin: 0 calc((100% - 150rpx)/2);
			margin-top: 60rpx;
		}

		.title {
			text-align: center;
			margin: 40rpx;
		}

		.buttom {
			display: flex;
			justify-content: space-between;
			padding: 0 60rpx;
			margin: 40rpx 0;

			view,
			button {
				width: 200rpx;
				height: 65rpx;
				line-height: 65rpx;
				text-align: center;
				background-color: #DCDFE6;
				color: #fff;
				border-radius: 40rpx;
				border: none;
				margin: 0 !important;
				font-size: 30rpx !important;
			}

			button {
				background-color: #FA436A;
			}
		}
	}
</style>
